import React, { memo } from 'react';
import { useNavigate } from 'react-router-dom';
import SearchInput from '../SearchInput';
import PropTypes from 'prop-types';
import './index.less';

Index.propTypes = {
    title: PropTypes.string.isRequired,
    rightTxt: PropTypes.string,
    search: PropTypes.bool,
    getHandleRight: PropTypes.func,
    sendHandlePressVal: PropTypes.func,
    hideScan: PropTypes.bool
};

Index.defaultProps = {
    title: "标题"
};

function Index(props) {
    const { title, rightTxt, search, getHandleRight, sendHandlePressVal, hideScan } = props;
    const navigate = useNavigate(); // 替代history对象[6,8](@ref)

    return (
        <div className="headTop">
            <div className='head-line'>
                <div className="h-left" onClick={() => navigate(-1)}>
                    <img src={require("../../assets/img/arrow_back.png").default} alt="" />
                </div>
                <div className="h-tit">{title}</div>
                {
                    rightTxt ? 
                    <div className="h-right" onClick={() => getHandleRight()}>{rightTxt}</div> : 
                    <div></div>
                }
            </div>
            {
                search &&
                <div className="head-search">
                    <SearchInput 
                        getHandlePressVal={(val) => sendHandlePressVal(val)} 
                        hideScan={hideScan}
                    />
                </div>
            }
        </div>
    );
}

export default memo(Index); // 移除withRouter包裹[7,8](@ref)